<template>
	<div id="temp">
		<!-- 图片详情部分 -->
		<div id="desc">
			<h4>{{photoInfo.title}}</h4>
			<p class="des">
				{{photoInfo.add_time | datefmt('YYYY-MM-DD HH:mm:ss')}} 
				{{photoInfo.click}}次浏览
			</p>
			<p class="line"></p>
			<!-- 图片九宫格 -->
			<div class="mui-content">
				<ul class="mui-table-view mui-grid-view mui-grid-9">
					<li v-for="(item, index) in imgs" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
							<img @click="$preview.open(index, imgs)" class="preview-img" :src="item.src" height="100" />
					</li>
				</ul>
		</div>
			
			<p v-html="photoInfo.content"></p>
			
		</div>
		
		<!-- 评论区 -->
		<div id="comment">
			<comment :id="id"></comment>
		</div>
	</div>
</template>

<script>
	import comment from '../subcom/comment.vue';
	import { Toast } from 'mint-ui';
	export default {
		components: {
			comment
		},
		data() {
			return {
				id: 0, //接收路由参数  (图片的id)
				photoInfo: {}, //存放图片详情数据
				imgs: []  //存放图片缩略图
			}
		},
		created() {
			this.id = this.$route.params.id;
			this.getInfo();
			this.getImgs();
		},
		methods: {
			//获取缩略图
			getImgs() {
				var url = this.$common.apidomain + '/api/getthumimages/' + this.id;
				this.$http.get(url).then(function (res) {
					console.log(res.body.message);
					//处理获取的数据
					res.body.message.forEach(function (item) {
						//动态设置图片的宽高
						var img = document.createElement('img');
						img.src = item.src;
						//等图片加载完成之后再设置属性值  否则可能会因为网速的原因预览图片时不会出现
						img.onload = function () {
							item.w = img.width;
							item.h = img.height;
						}
					});
					this.imgs = res.body.message;
				});
			},
			//获取图片详情
			getInfo() {
				var url = this.$common.apidomain + '/api/getnew/' + this.id;
				this.$http.get(url).then(function (res) {
					//console.log(res.body);
					if (res.body.status != 0) {
						Toast(res.body.message);
						return;
					}
					this.photoInfo = res.body.message[0];
				});
			}
		}
	}
</script>

<style scoped>
	/* 图片详情部分 */
	#desc {
		padding: 10px;
	}
	#desc h4 {
		color: #0094ff;
	}
	#desc .des {
		color: rgba(0, 0, 0, .4);
		margin-top: 10px;
	}
	#desc p:last-of-type {
		margin-top: 15px;
	}
	.line {
		width: 100%;
		height: 1px;
		border-bottom: 1px solid rgba(0, 0, 0, .3);
	}
	
	/* 图片九宫格样式 */
	.mui-content,.mui-content ul{
		background-color: #fff;
	}
	.mui-content img {
		width: 100px;
		height: 100px;
	}
	.mui-grid-view.mui-grid-9 .mui-table-view-cell {
		border-right:0px;
		border-bottom:0px; 
	}
	.mui-grid-view.mui-grid-9 {
		border-top:0px;
		border-left:0px; 
	}
</style>